<template>
    <div class="systemsettings">
        <ItemDetail :loading="tableLoading" :show.sync="showModal" :value="item" title="Edit Item" :id="itemID" @submit="confirmSubmit" :action="action" :height="600"></ItemDetail>

        <div class="row">
            <div class="col-md-12 p-0">
                <filter-form v-if="filters.length" :columns="filters" @submit="submit"></filter-form>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12 bg-white p-0 m-0">
                <item-table title="System Settings" :columns="defaultColumns" :data="data" :loading="tableLoading" @sort="sort"
                            :total="total" :model="model" isColumns isAdd @add="addItem"
                >
                <template slot="actions" slot-scope="props">
                        <button type="button" class="btn btn-info btn-outline btn-circle btn-md m-r-5" @click="editItem(props)">
                            <i class="fif fif-edit"></i>
                        </button>
                </template>
                </item-table>
                <v-paginate :pageCount="pageCount" :page="page" @change="changePage"></v-paginate>
            </div>
        </div>
    </div>
</template>

<script>
    // components
    import vSelect from 'vue-select'
    import vPaginate from '@/components/widgets/Pagination'
    import ItemTable from '@/components/widgets/ItemTable'
    import ItemDetail from '@/components/widgets/ItemDetail'
    import FilterForm from '@/components/widgets/FilterForm'

    // mixin
    import {lifeHookMixin, itemMixin} from '@/mixins/item'

    export default {
        name: "SystemSettings",
        components: {vSelect, vPaginate, ItemTable, FilterForm, ItemDetail},
        mixins: [lifeHookMixin, itemMixin],
        created() {
            this.model = "Resources"
        },
        data() {
            return {
                rawFilter: {user_editable: true}
            }
        }
    }
</script>

<style scoped>

</style>